<template>
	<view class="content">
		<view class="time">
			<view class="title font26">
				结账时间：
			</view>
			<view class="timeBox">
				<view class="starTime font28" @click="starOpen">
					<view class="title">
						{{starTime}} ~
					</view>
				</view>
				<view class="endTime font28" @click="endOpen">
					<view class="title">
						{{endTime}}
					</view>
				</view>
			</view>
		</view>
		<view class="collapse">
			<view class="tolit font30">
				提成总计 {{Number(total.recharge_commission) + Number(total.goods_commission) + Number(total.order_commission)}}
			</view>
			<uni-collapse>
				<uni-collapse-item :show-animation="true" title="合计">
					<view class="dataBox">
						<view class="item">
							<view class="title font24">
								总订单提成
							</view>
							<view class="datas font30">
								{{total.order_commission}}
							</view>
						</view>
						<view class="item">
							<view class="title font24">
								总充值提成
							</view>
							<view class="datas font30">
								{{total.recharge_commission}}
							</view>
						</view>
						<!-- <view class="item">
							<view class="title font24">
								总产品提成
							</view>
							<view class="datas font30">
								{{total.goods_commission}}
							</view>
						</view> -->
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</view>
		<view class="collapses" v-for="(item,index) in total.coach_list" :key="item.id">
			<view class="tolit font30">
				提成总计 {{Number(item.order_commission) + Number(item.recharge_commission) + Number(item.goods_commission)}}
			</view>
			<!-- 	<view class="collapseBtn font24" @click="to(item.id)">
				查看日提成
			</view> -->
			<uni-collapse>
				<uni-collapse-item :show-animation="true" :title="item.coach_name">
					<view class="dataBox">
						<view class="item">
							<view class="title font24">
								订单提成
							</view>
							<view class="datas font30">
								{{item.order_commission}}
							</view>
						</view>
						<view class="item">
							<view class="title font24">
								充值提成
							</view>
							<view class="datas font30">
								{{item.recharge_commission}}
							</view>
						</view>
						<!-- <view class="item">
							<view class="title font24">
								产品提成
							</view>
							<view class="datas font30">
								{{item.goods_commission}}
							</view>
						</view> -->
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</view>
		<yt-dateTimePicker ref="starShow" @submit="starTimes" :start-year="2000" :end-year="2099" :time-init="starTime"
			:time-hide="[true, true, true, false, false, false]" :time-label="['年', '月', '日', '时', '分', '秒']" />
		<yt-dateTimePicker ref="endShow" @submit="endTimes" :start-year="2000" :end-year="2099" :time-init="endTime"
			:time-hide="[true, true, true, false, false, false]" :time-label="['年', '月', '日', '时', '分', '秒']" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				total: {},
				endTime: '',
				starTime: ''
			};
		},
		onLoad() {
			this.getCurrentTime()
			this.getData()
		},
		methods: {
			async getData() {
				let data = await this.$api.shopowner.coachStoreCommission({
					start_time: this.starTime,
					end_time: this.endTime,
				})
				this.total = data
			},
			getCurrentTime() {
				const now = new Date();
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0');
				const day = String(now.getDate()).padStart(2, '0');
				const hours = String(now.getHours()).padStart(2, '0');
				const minutes = String(now.getMinutes()).padStart(2, '0');
				const seconds = String(now.getSeconds()).padStart(2, '0');
				this.starTime = `${year}-${month}-${day}`;
				this.endTime = `${year}-${month}-${day}`;
			},
			starOpen() {
				this.$refs.starShow.show();
			},
			endOpen() {
				this.$refs.endShow.show();
			},
			starClose() {
				this.$refs.starShow.hide();
			},
			endClose() {
				this.$refs.endShow.hide();
			},
			// 开始时间
			starTimes(e) {
				this.starTime = `${e.year}-${e.month}-${e.day}`;
				this.getData()
			},
			// 结束时间
			endTimes(e) {
				this.endTime = `${e.year}-${e.month}-${e.day}`;
				this.getData()
			},
			to(id) {

			}
		}
	}
</script>

<style lang="scss">
	.content {
		.time {
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 27rpx 0;

			.timeBox {
				display: flex;
				align-items: center;

				.starTime {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.title {
						color: #333333;
					}
				}

				.endTime {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.title {
						color: #333333;
					}
				}
			}
		}

		.collapse {
			position: relative;
			margin-bottom: 14rpx;

			.tolit {
				position: absolute;
				top: 33rpx;
				color: #fff;
				right: 105rpx;
			}

			.dataBox {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				padding-top: 36rpx;

				.item {
					width: 33%;
					margin-bottom: 36rpx;

					.title {
						color: #B8BFCD;
						margin-bottom: 24rpx;
					}

					.datas {
						color: #FFFFFF;
					}
				}
			}

			/deep/.uni-collapse {
				background-color: #4E6382;
				padding: 33rpx 34rpx 0 34rpx;
				width: auto;

				.uni-collapse-item {
					.uni-collapse-item__title {
						border-bottom: 1px solid #5C6C8C;
						padding-bottom: 33rpx;

					}

					.uni-collapse-item__title-box {
						background-color: unset;
						padding: unset;
						height: unset;
						line-height: unset;

						.uni-collapse-item__title-text {
							font-weight: 400;
							font-size: 30rpx;
							color: #FFFFFF;
						}
					}

					.uni-collapse-item__wrap {
						background-color: unset;

						.uni-collapse-item__wrap-content {
							border-bottom-color: unset;
						}
					}
				}

			}
		}

		.collapses {
			position: relative;
			margin-bottom: 15rpx;

			.tolit {
				position: absolute;
				top: 33rpx;
				right: 105rpx;
			}

			.collapseBtn {
				position: absolute;
				top: 24rpx;
				left: 140rpx;
				background: #F2FDF8;
				border-radius: 25rpx;
				border: 1px solid #1EB481;
				color: #1EB481;
				width: 162rpx;
				height: 49rpx;
				text-align: center;
				line-height: 49rpx;
			}

			.dataBox {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				padding-top: 36rpx;

				.item {
					width: 33%;
					margin-bottom: 36rpx;

					.title {
						color: #B8BFCD;
						margin-bottom: 24rpx;
					}

					.datas {
						color: #333333;
					}
				}
			}

			/deep/.uni-collapse {
				padding: 33rpx 34rpx 0 34rpx;
				width: auto;

				.uni-collapse-item {
					.uni-collapse-item__title {
						border-bottom: unset;
						padding-bottom: 33rpx;
					}

					.uni-collapse-item__title-box {
						padding: unset;
						height: unset;
						line-height: unset;

						.uni-collapse-item__title-text {
							font-weight: 400;
							font-size: 30rpx;
							color: #1EB481;
						}
					}

					.uni-collapse-item__wrap {

						.uni-collapse-item--border {
							border-bottom-width: unset;
						}
					}
				}
			}
		}
	}
</style>